<template>
  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="title"
        name="title"
        label="标题"
        placeholder="标题"
        :rules="[{ required: true, message: '请填写标题' }]"
      />
      <van-field
        v-model="body"
        name="body"
        label="内容"
        placeholder="内容"
        :rules="[{ required: true, message: '请填写内容' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" @click="addMemo">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue';

import { toast } from '@/utils/toastHelper';
import { useLocalStorage } from '@vueuse/core';

const title = ref('');
const body = ref('');
const emit = defineEmits(['back-memo-list']);

const memoList = useLocalStorage('memo-list', []);

function addMemo() {
  memoList.value = [
    ...memoList.value,
    {
      id: Date.now(),
      title: title.value,
      body: body.value,
    },
  ];

  toast('成功添加');

  emit('back-memo-list');
}
</script>
